<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>影视剧留言板</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="comments">
      <!-- 评论内容 -->
      <h3 class="comm-head">评论</h3>
      <div class="comm-input">
        <textarea placeholder="爱发评论的人，运气都很棒" id="content">
        </textarea>
        <div class="foot">
          <div class="word">0/100</div>
          <div class="btn">发表评论</div>
        </div>
      </div>
      <!-- 头部 -->
      <h3 class="comm-head">
        热门评论<sub>(5)</sub>
        <span class="active">默认</span>
        <span>时间</span>
      </h3>
      <!-- 评论列表 -->
      <ul class="comm-list">
        <!-- <li class="comm-item">
        <div class="avatar" style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"></div>
        <div class="info">
          <p class="name vip">
            清风徐来
            <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
          </p>
          <p class="time">
            <span>2012-12-12</span>
            <span class="iconfont icon-collect"></span>
            <span class="iconfont icon-collect-sel"></span>
            <span class="del">删除</span>
          </p>
          <p>
            这里是评论的内容！！！这里是评论的内容！！！这里是评论的内容！！！
          </p>
        </div>
      </li> -->
        <!-- <script type="text/html" id="form-add">
          {{each  list}}
          <li class="comm-item">
            <div
              class="avatar"
              style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"
            ></div>
            <div class="info">
              <p class="name vip">
                {{$value.username}}
                <img
                  alt=""
                  src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png"
                />
              </p>
              <p class="time">
                <span>{{$value.time|dataFormat}}</span>
                <span class="iconfont icon-collect"></span>
                <span class="iconfont icon-collect-sel"></span>
                <span class="del" data-id="{{$value.id}}">删除</span>
              </p>
              <p>
                {{$value.content}}
              </p>
            </div>
          </li>
          {{/each}}
        </script> -->
      </ul>
    </div>

    <script src="/lib/jquery.js"></script>
    <script src="/lib/template-web.js"></script>
    <script>
      $(function () {
        function fm() {
          $.ajax({
            method: "get",
            url: "http://124.223.14.236:3001/api/notes",
            success: function (res) {
              console.log(res);
              if (res.success !== true) {
                return alert("获取失败！");
              }
                      let Str = res.data.list
                        .map(function (item) {
                          return `
                    <li class="comm-item">
                <div class="avatar" style="background-image: url('https://static.youku.com/lvip/img/avatar/310/6.png');"></div>
                <div class="info">
                  <p class="name vip">
                   ${item.username}
                    <img alt="" src="https://gw.alicdn.com/tfs/TB1c5JFbGSs3KVjSZPiXXcsiVXa-48-48.png" />
                  </p>
                  <p class="time">
                    <span>${item.time}</span>
                    <span class="iconfont icon-collect"></span>
                    <span class="iconfont icon-collect-sel"></span>
                    <span class="del" data-id="${item.id}">删除</span>
                  </p>
                  <p>
                    ${item.content}
                  </p>
                </div>
              </li>
                    `;
                        })
                        .join("");
              // let Str = template("form-add", res.data);
              $(".comm-list").html(Str);
            },
          });
        }
        fm();

        $(".btn").on("click", function (e) {
          e.preventDefault();
          const content = $("#content").val().trim();
          $.ajax({
            method: "post",
            url: "http://124.223.14.236:3001/api/notes",
            headers: {
              Authorization: localStorage.getItem("x-token"),
            },
            data: { content },
            success: function (res) {
              console.log(res);
              if (res.success !== true) {
                return alert("添加失败！");
              }
              fm();
              $("#content").val("");
            },
          });
        });

        $(".comm-list").on("click", ".del", function (e) {
          e.preventDefault();
          let id = $(this).attr("data-id");
          $.ajax({
            method: "DELETE",
            url: `http://124.223.14.236:3001/api/notes/${id}`,
            headers: {
              Authorization: localStorage.getItem("x-token"),
            },
            success: function (res) {
              console.log(res);
              if (res.success !== true) {
                return alert(res.msg);
              }
              fm();
            },
          });
        });
      });
    </script>
  </body>
</html>
